<template>
    <div class="handlingMatters-withdrawalDocuments-box" >
        <div class="withdrawalDocuments-toolbox-form-box1" :key="withdrawalDocumentsKey" >
            <a-form-model
                class="form-model-big-box"
                ref="ruleForm"
                :model="formData"
                :rules="rules"
                layout="inline"
            >
                <a-descriptions bordered style="width: 100%;" >
                    <a-descriptions-item :span="4">
                        <span slot="label" class="descriptions-label-slot">
                            撤件状态
                        </span>
                        <a-form-model-item>
                            <span v-if="formData.fzwxtcjzt == '撤件回复'" class="fsxmcQ-red-t" style="font-size: 18px;font-weight: 600;" >撤件待回复</span>
                            <span v-if="formData.fzwxtcjzt == '撤件审核中'" class="fsxmcQ-c-t" style="font-size: 18px;font-weight: 600;">{{ formData.fzwxtcjzt }}</span>
                            <span v-if="formData.fzwxtcjzt == '已撤件'" class="fsxmcQ-l-t" style="font-size: 18px;font-weight: 600;">{{ formData.fzwxtcjzt }}</span>
                        </a-form-model-item>
                    </a-descriptions-item>
                    <a-descriptions-item :span="2">
                        <span slot="label" class="descriptions-label-slot" >
                            撤件申请原因
                        </span>
                        <a-form-model-item >
                            <a-textarea 
                                class="textarea-noBorder-v"
                                readOnly
                                style="width: 100%;"
                                :defaultValue="formData.fcjsqyy?formData.fcjsqyy:'无'"
                                :autosize="{ minRows: 1, maxRows: 10000 }"
                                placeholder="撤件申请原因"
                            ></a-textarea>
                        </a-form-model-item>
                    </a-descriptions-item>
                    <a-descriptions-item :span="2">
                        <span slot="label" class="descriptions-label-slot" >
                            撤件申请时间
                        </span>
                        <a-form-model-item >
                           {{ formData.fcjsqsj }}
                        </a-form-model-item>
                    </a-descriptions-item>
                    <a-descriptions-item :span="formData.isView?2:4" >
                        <span slot="label" class="descriptions-label-slot" >
                            <span class="xhText" >*</span>
                            中心回复意见
                        </span>
                        <a-form-model-item required prop="fcjyj">
                            <a-textarea 
                                style="width: 100%;"
                                v-if="formData.isView"
                                readOnly
                                class="textarea-noBorder-v"
                                v-model:value="formData.fcjyj"
                                :autosize="{ minRows: 1, maxRows: 10000 }"
                                placeholder="请输入中心回复意见"
                            ></a-textarea>
                            <a-textarea 
                                v-else
                                style="width: 100%;"
                                v-model:value="formData.fcjyj"
                                :autosize="{ minRows: 1, maxRows: 10000 }"
                                placeholder="请输入中心回复意见"
                            ></a-textarea>
                        </a-form-model-item>
                    </a-descriptions-item>
                    <a-descriptions-item :span="2" v-if="formData.isView && (formData.fzwxtcjzt == '撤件审核中' || formData.fzwxtcjzt == '已撤件')">
                        <span slot="label" class="descriptions-label-slot" >
                            中心回复时间
                        </span>
                        <a-form-model-item>
                            {{ formData.fcjyjsj }}
                        </a-form-model-item>
                    </a-descriptions-item>
                    <a-descriptions-item :span="2" v-if="formData.isView && formData.fzwxtcjzt == '已撤件'">
                        <span slot="label" class="descriptions-label-slot" >
                            撤件结果
                        </span>
                        <a-form-model-item >
                            <a-textarea 
                                readOnly
                                class="textarea-noBorder-v"
                                style="width: 100%;"
                                v-model="formData.fcjjg"
                                :autosize="{ minRows: 1, maxRows: 10000 }"
                                placeholder="撤件结果"
                            ></a-textarea>
                        </a-form-model-item>
                    </a-descriptions-item>
                    <a-descriptions-item :span="2" v-if="formData.isView  && formData.fzwxtcjzt == '已撤件'">
                        <span slot="label" class="descriptions-label-slot" >
                            撤件结果时间
                        </span>
                        <a-form-model-item >
                            {{ formData.fcjjgsj }}
                        </a-form-model-item>
                    </a-descriptions-item>
                    <a-descriptions-item :span="4" v-if="!formData.isView">
                        <span slot="label" class="descriptions-label-slot" >
                            <span style="color: #fff;" class="xhText" >*</span>
                            <span style="display: flex;justify-content: space-between;width: 57px;">
                                <span>操</span>
                                <span>作</span>
                            </span>
                        </span>
                        <a-form-model-item class="zm-form-model">
                            <a-button class="blue-btn" type="primary" @click="submitClick()" icon="edit">提交</a-button>
                        </a-form-model-item>
                    </a-descriptions-item>
                </a-descriptions>
            </a-form-model>
            <div style="display: flex;width: 100%;margin-top: 5px;" v-if="formData.sqsxid && (formData.fzwxtcjzt == '撤件回复' || formData.fzwxtcjzt == '已撤件')" >
                <div style="width: 30%;height: calc(100vh - 325px);overflow-y: auto;"  >
                    <table border bordercolor="#d9d9d9" style="width: 100%;" class="material-table-box-v">
                        <tr>
                            <th>{{materialList[0].clmc}}</th>
                        </tr>
                        <tr v-for="(item,index) in materialList[0].wjList" :key="index" >
                            <td :class="selectFileData.id == item.id?'selectFilebox':''" @click="selectPreparationOfInspection(item,index)">{{ item.fwjccmc }}</td>
                        </tr>
                    </table>
                </div>
                <div style="flex: 1;" >
                    <a-spin tip="正在加载中..." :spinning="zlmlSpinning">
                        <iframe
                            v-if="iframeSrc"
                            :key="iframeKey"
                            :src="iframeSrc" 
                            ref="iframeServerEditingRef" 
                            scrolling="auto" 
                            width="100%"
                            :height="(windowInnerHeight-320)+'px'"
                            style="border: 0;object-fit: contain !important;"
                        ></iframe>
                        <div v-else style="display: flex;justify-content: center;margin-top: 20px;">
                            <a-empty description="暂无文件或文件发生错误！"/>
                        </div>
                    </a-spin>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { spcyzwfwpushQyCjOpinion, spcyqycjsqMlList, } from './service/index'
import YchConstant from "@/api/YchConstant";
export default {
    components:{

    },
    props:{
        currentObj:{
            type:Object,
            default: () => {},
            required:false
        }
    },
    data(){
        return{
            formData:{},
            rules:{
                fcjyj: [{ required: true, message: '请输入中心回复意见', trigger: 'change' }],
            },
            withdrawalDocumentsKey:null,
            materialList:[],
            iframeSrc:'',
            iframeKey:null,
            windowInnerHeight:window.innerHeight,
            selectFileData:{},
            zlmlSpinning:false,
            materialSpinning:false,
        }
    },
    watch:{
        currentObj: {
            handler (newval, oldVal) {
                this.getData(newval)
                //console.log('没有监听到吗',newval)
                // this.formData = JSON.parse(JSON.stringify(newval))
                // this.withdrawalDocumentsKey = Date.now()
            },
            // deep: true
        },
    },
    mounted(){
        
    },
    methods:{
        getData(row){
            //console.log('拿到什么撤件信息',row)
            this.formData = row
            this.withdrawalDocumentsKey = Date.now()
            if(row.sqsxid && (row.fzwxtcjzt == '撤件回复' || row.fzwxtcjzt == '已撤件')){
                this.materialSpinning = true
                spcyqycjsqMlList({sqsxid:row.sqsxid}).then(res=>{
                    if(res.code == 200){
                        //console.log('撤件列表',res.result)
                        this.materialList = res.result
                        if(res.result[0].wjList && res.result[0].wjList.length){
                            this.selectPreparationOfInspection(res.result[0].wjList[0],0)
                        }
                        
                    }else{
                        this.materialList = []
                    }
                    this.materialSpinning = false
                })
            }
        },
        selectPreparationOfInspection(item,index){
            this.selectFileData = item
            this.zlmlSpinning = true
            if(item.fwjlx == '.doc' || item.fwjlx == '.docx'){
                openFileReadOnly({id:item.id}).then(res=>{
                    if(res.code == 200){
                        this.iframeSrc = res.result.wordUrl
                        this.iframeKey = Date.now()
                    }else{
                        this.$message.warning(res.message)
                        this.iframeSrc = ''
                    }
                    this.zlmlSpinning = false
                })
            }else{
                this.iframeSrc = bootConfig[process.env.NODE_ENV].locality_ApI + YchConstant.SPZX_SPCY + '/spcyRsWjmb/openWjjl?id='+item.id
                this.iframeKey = Date.now()
                this.zlmlSpinning = false
            }
            
        },
        submitClick(){
            var that = this
            this.$refs.ruleForm.validate(valid => {
                //console.log(valid)
                if (valid) {
                    this.$confirm({
                        title:'您确认要提交吗？',
                        // icon: createVNode(ExclamationCircleOutlined),
                        onOk() {
                            let data = {
                                opinion:that.formData.fcjyj,
                                sqsxid:that.formData.sqsxid,
                            }
                            spcyzwfwpushQyCjOpinion(data).then(res=>{
                                if(res.code == 200){
                                    that.$message.success(res.message)
                                    that.$emit('successChange',false)
                                }else{
                                    that.$message.warning(res.message)
                                }
                            })
                        },
                        
                    });
                } else {
                    //console.log('error submit!!');
                    return false;
                }
            })
        },
    }
}
</script>
<style lang="less">
.handlingMatters-withdrawalDocuments-box{
    display: flex;
    justify-content: center;
    .withdrawalDocuments-toolbox-form-box1{
        display: flex;
        flex-wrap: wrap;
        width: 90%;
        background-color: #fff;
        .ant-descriptions-item-content{
            width: 50%;
        }
        .ant-form-item,.ant-form-item-control-wrapper{
            width: 100%;
        }
        .form-model-big-box{
            width: 100%;
        }
        .Empty-lin-box{

        }
        .undefined-item-content{
            height: 40px !important;
        }
        .ant-descriptions-bordered .ant-descriptions-item-label{
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
            background-color:#e6f7ff;
            width: 88px !important;
            text-align: right;
            font-family:simHei !important;
        }
        .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
            padding: 3px 10px !important;
            
        }
        .descriptions-label-slot{
            display: flex;
            align-items: center;
            justify-content: flex-end;
            width: 95px !important;//确保左侧固定文字不会换行
        }
        .xhText{
            display: inline-block;
            color: #f5222d;
            line-height: 31px;
            padding-right: 2px;
            font-size: 14px;
            font-weight: 600;
            height: 30px;
        }
        .descriptions-item-center{
            
        }
        .ant-form-inline .ant-form-item-with-help{
            margin-bottom: 0px !important;
        }
        .zm-form-model{
            display: flex;
            .ant-form-item-control-wrapper{
                flex: 1;
            }
        }
        .ant-form-item-control{
            min-height: 40px;
        }
        .ant-form-item-control-wrapper{
            font-family:仿宋_GB2312 !important;
        }
        .ant-descriptions-bordered .ant-descriptions-row{
            border-bottom: 1px solid #e4e3e3;
        }
        .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
            border-right: 1px solid #e4e3e3;
        }
        .ant-descriptions-bordered .ant-descriptions-view{
            border: 1px solid #e4e3e3;
            border-right: 0;
        }
        .ant-descriptions-row:last-child{
            border-bottom: 0;
        }
        .ant-form-item-children{
            color: #242424 !important;
        }

        .material-table-box-v{
            th{
                background-color: #dee5ed !important;
            }
            th,td{
                padding: 10px;
            }
            .selectFilebox{
                border: 2px solid #fe8939;
                background-color: #e6f7ff !important;
            }
        }
    }
}
</style>